<template>
<div id="my-comment">
    <el-card v-for="item in comments " id="my-comment-info" :key="item.id" style="width: 800px">
        <div id="user-released-info">
            <span class="label">用户昵称:</span>
            <span class="content">{{item.userNickName}}</span>
            <span class="label">发布时间:</span>
            <span class="content">{{item.createTime}}</span>
        </div>
        <div id="user-released-info-content">
            {{item.commentContent}}
        </div>
        <div id="user-released-info-delete">
          <el-button @click="deleteComment(item.id)" type="warning" icon="el-icon-delete" circle ></el-button>
        </div>
    </el-card>
</div>
</template>
<script>
export default{
    name: 'MyComment',
    data(){
        return{
            res:{
                message:'',
                code:'',
                data:''
            },
            resD:{

            },
            comments:[
                {
                    id:'',
                    commentContent:'',
                    userNickName:'',
                    createTime:''
                }
            ]
        }
    },
    created(){
        this.queryComments();
    },
    methods:{
        queryComments(){
            this.$axios.get("/comment/query/"+sessionStorage.getItem("userId")).then((response)=>{
                this.res = response.data;
                this.comments = this.res.data;
                for(var i = 0;i < this.res.data.length;i++){
                    this.comments[i].userNickName = this.res.data[i].acceptedUser.userNickName;
                }
            })
        },
        deleteComment(id){
            this.$axios.delete("/comment/delete/"+id).then((response)=>{
                this.resD = response.data;
                if(this.resD.code == '200'){
                    this.$message({
                        message: this.resD.message,
                        type: 'success'
                    });
                this.queryComments();
                }else{
                    this.$message.error(this.resD.message);
                }
            })
        }
    }
}
</script>
<style scoped>




#user-released-info-content{
    height: 51px;
    text-align: left;
    word-break: break-all;
    overflow: hidden;
}

</style>
